<template>
    <div :style="!isMO?'margin-left: 10%; margin-right: 10%; margin-top: 2%; margin-bottom: 2%':'margin-top: 2%;'">
        <br/>
        <h2 style="text-align: center">
            留言
        </h2>
        <br/>
        <Card shadow>
            <Button type="primary" v-if="login" @click="showM = true">留言</Button>
            <Button v-if="showM" @click="showM = false" type="text">取消</Button>
            <div style="width: 300px" v-if="showM">
                <br/>
                <Form @submit.native.prevent="doMsg">
                    <FormItem>
                        <Input type="textarea" v-model="chat.text" placeholder="留下你的足迹吧" size="large" rows="3">

                        </Input>
                    </FormItem>
                </Form>
                <Button style="width: 100px" type="primary" @click="doMsg">
                    <Icon type="ios-chatbubbles-outline"/>
                    发 送
                </Button>
            </div>
            <Alert type="warning" style="width: 180px" v-if="!login">未登录无法留言</Alert>
            <Divider/>
            <div v-for="i in msgs.list" style="margin-bottom: 10px">
                <strong style="font-size: large;">{{i.name}}</strong> / {{i.time}}
                <br/>
                <span style="font-size: medium; color: gray" v-if="i.to!='-1'">@{{i.to}}：</span>
                <span style="font-size: medium">{{i.text}}</span>
                <Button type="text" size="small" v-if="login"><span style="color: dodgerblue; font-size: small"
                                                                    @click="id = i.id">回复</span></Button>
                <Button v-if="i.id == id" @click="id = -1" type="text">取消回复</Button>
                <div style="width: 300px" v-if="i.id == id">
                    <br/>
                    <span>回复：{{i.name}}</span>
                    <Form @submit.native.prevent="doChat(i.name)">
                        <FormItem>
                            <Input type="textarea" v-model="chat.text" placeholder="留下你的足迹吧" size="large" rows="3">

                            </Input>
                        </FormItem>
                    </Form>
                    <Button style="width: 100px;" type="primary" @click="doChat(i.name)">
                        <Icon type="ios-chatbubbles-outline"/>
                        发 送
                    </Button>
                </div>
            </div>
        </Card>
        <br/>
        <Page :total="msgs.total" @on-change="page" :page-size="10" style="margin-left: 3%"/>
    </div>
</template>

<script>
    export default {
        name: "Msg",
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                login: false,
                now: '',
                showM: false,
                chat: {
                    name: '',
                    to: '',
                    text: '',
                },
                msgs: '',
                id: '',
                nPage: 1,
            }
        },
        created() {
            const that = this;
            axios.get('/getUser').then(function (resp) {
                that.now = resp.data;
                if (resp.data != '') {
                    that.login = true;
                }
            })
            this.getData();
        },
        methods: {
            doChat(to) {
                if (this.chat.text != '') {
                    const t = this;
                    t.chat.name = t.now.name;
                    t.chat.to = to;
                    axios.post('/addChat', t.chat).then(function () {
                        t.$Message.success('留言成功')
                        t.chat.text = '';
                        t.id = -1;
                        t.page(t.nPage);
                    })
                } else {
                    this.$Message.error('请填写内容')
                }
            },
            doMsg() {
                if (this.chat.text != '') {
                    const t = this;
                    t.chat.name = t.now.name;
                    t.chat.to = '-1';
                    axios.post('/addChat', t.chat).then(function () {
                        t.$Message.success('留言成功')
                        t.chat.text = '';
                        t.showM = false;
                        t.page(t.nPage);
                    })
                } else {
                    this.$Message.error('请填写内容')
                }
            },
            getData() {
                const t = this;
                axios.get('/queryChat').then(function (resp) {
                    t.msgs = resp.data;
                })
            },
            page(p) {
                const t = this;
                t.nPage = p;
                axios.get('/queryChat?now=' + p).then(function (resp) {
                    t.msgs = resp.data;
                })
            }
        }
    }
</script>

<style scoped>

</style>